<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery-1.11.1.min.js"></script>
    <title>lxp_test</title>
<style>
.test{
	width: 180px;
	height: 80px;
	border:1px solid red;
	margin-bottom: 20px;;
}
button{
	margin-left: 15px;
}
</style>
  </head>
  <body>
  	<button type="button" onclick="xxx()">xxx</button>
     <div id="d0" class="test"></div>
    <div id="d1" class="test" contenteditable="true"></div>
    <div>
    	 <button type="button" onclick="test()">to0</button>
    	 <button type="button" onclick="to2()">to2</button>
    </div>
		<textarea id="d2" class="test" placeholder="xxx"></textarea>
		<div>
			<button type="button" onclick="test2()">to0</button>
			<button type="button" onclick="test3()">to1</button>
			<button type="button" onclick="test4()">to3</button>
		</div>
		<textarea id="d3" class="test" placeholder="xxx"></textarea>
		<pre id="d4" class="test"></pre>
<script type="text/javascript">
	 function test(){
	 		var v = $("#d1").text();
	 		console.log(v.indexOf("\n"))
	 		console.log(v.indexOf("<br/>"))
	 		v= v.replace("\n","<br/>");
	 		$("#d2").val(v);
	 }
	 function to2(){
	 	var v = $("#d1").text();
	 		$("#d0").text(v);
	 }
	 function test2(){
	 		var v = $("#d2").val();
	 		
	 		console.log(v.indexOf("\n"))
	 		console.log(v.indexOf("<br/>"))
	 		v= v.replace("\n","<br/>");
	 		$("#d1").text(v);
	 }
	  function test3(){
	  	
	 		var v = $("#d2").val();
	 		console.log(v.indexOf("\n"))
	 		console.log(v.indexOf("<br/>"))
	 		$("#d0").text(v);
	 }
	   function test4(){
	  	
	 		var v = $("#d2").val();
	 		console.log(v.indexOf("\n"))
	 		console.log(v.indexOf("<br/>"))
	 		$("#d3").val(v);
	 }
	  function xxx (){
	  	var str = '啦啦啦啦啦 <title>lxp_test</title>啦啦啦啦\r\n  呜呜呜呜呜呜呜呜\r\n  yaoui.com 技术博客';
	  	$("#d0").text(str);
	  	$("#d1").text(str);
	  	$("#d2").val(str);
	  	$("#d3").val(str);
	  		$("#d4").html(str);
	  	
	  }
	
</script>
  </body>
</html>